<template>
    <div class="discuss-wrap">
        <div class="discuss-list-wrap">
            <div class="discuss-item" v-for="(item,key) of dataList" :key="key">
                <div class="item-top">
                    <div class="item-top-img">
                        <img :src="item.ParentComment.PicUrl" alt="">
                    </div>
                    <div class="item-top-right">
                        <h3>{{item.ParentComment.Creator}}</h3> <span>{{item.ParentComment.CreateTime}}</span>
                    </div>
                </div>
                <div class="item-center">
                    {{item.ParentComment.Summary}}
                </div>
                <div class="item-bottom">
                    <span class="replyNum"
                        @click="goNextPage(item)">回复({{item.ParentComment.ReplyCount?item.ParentComment.ReplyCount:'0'}})</span>
                    <span class="giveLike" v-if="item.ParentComment.ParentID=='0'"
                        @click="giveLike(item)">点赞({{item.ParentComment.ThumbsUpNum}})</span>
                    <span class="color-gray" @click="confirmDelete(item,key)" v-if="item.ParentComment.UserID==UserID">删除</span>
                </div>
            </div>
            <p style="text-align: center" v-if="moreText">下拉加载更多</p>
            <p style="text-align: center" v-if="noMoreText">没有更多数据了</p>
        </div>
        <div class="no-data-wrap" v-if="showNoData">
            <img src="../../../static/tabs/noData.png" alt="">
        </div>
        <div class="discuss-footer-fixed">
            <div class="footer-textarea-wrap">
                <textarea fixed="true" class="footer-textarea" placeholder="请输入..." v-model='Summary'></textarea>
            </div>
            <div class="footer">
                <div class="button" @click="submitData(1)">保存</div>
                <div class="button" @click="submitData(2)">提交</div>
            </div>
        </div>
        <van-toast id="van-toast" />
        <van-dialog id="van-dialog" />
    </div>
</template>
<script>
    import { CourseDiscussList, CourseDiscussZan, CourseDiscussAdd,CourseDiscussDelete } from '@/providers/service'
    export default {
        data() {
            return {
                dataList: [],
                UserID: '',
                Summary: '',
                RoleCode: '',
                UserID: '',
                discussId:0,
                PageIndex: 0,
                PageSize: 10,
                dataList: [],
                loadMoreBool: true,
                showNoData:false,
                moreText:false,
                noMoreText:false
            }
        },
        methods: {
            confirmDelete(item,key){
                this.$dialog.confirm({
                    title:'温馨提示',
                    message:'是否删除该条评论'
                }).then(() =>{
                    this.deletItem(item,key)
                }).catch((err)=>{
                    console.log(`一级评论${err}`)
                })
            },
            async deletItem(item, key) {
                try {
                    let res = await CourseDiscussDelete({
                        ID: item.ParentComment.ID
                    })
                    this.dataList.splice(key, 1)
                    if(this.dataList && !this.dataList.length){
                        this.showNoData = true
                    }
                    this.$toast('删除成功!')
                } catch (error) {
                    console.log(error)
                }
            },
            async submitData(status) {
                if (!this.Summary) {
                    this.$toast('请录入课程讨论内容后才可提交或保存！')
                    return false
                }
                let { TID, OtherCourseID } = this.$route.query
                try {
                    let res = await CourseDiscussAdd({
                        TID,
                        ParentID: 0,
                        UserID: this.UserID,
                        CreateBy: this.UserID,
                        Summary: this.Summary,
                        IPAdress: '127.0.0.1',
                        OtherCourseID,
                        Status:status,
                        ID: this.discussId != 0 ? this.discussId :0
                    });
                    if(status !== 1){
                        this.discussId = 0
                        this.dataList.unshift({
                            ParentComment: res
                        })
                        if(this.dataList && this.dataList.length){
                            this.showNoData = false
                        }
                        this.Summary = ''
                        this.$toast('提交评论成功')
                    }else{
                        this.discussId = res.ID
                        this.$toast('保存评论成功')
                    }
                } catch (error) {
                    if(status !== 1){
                        this.$toast('提交评论失败')
                    }else{
                        this.$toast('保存评论失败')
                    }
                    console.log(error)
                }
            },
            async giveLike(item) {
                try {
                    let res = await CourseDiscussZan({
                        OtherCourseDiscussID: item.ParentComment.ID,
                        UserID: this.UserID
                    })
                    if (item.ParentComment.IfThumbsUp) {
                        item.ParentComment.ThumbsUpNum = item.ParentComment.ThumbsUpNum - 1
                        item.ParentComment.IfThumbsUp = 0;
                        this.$toast('取消成功')
                    } else {
                        item.ParentComment.ThumbsUpNum = item.ParentComment.ThumbsUpNum + 1
                        item.ParentComment.IfThumbsUp = 1;
                        this.$toast('点赞成功')
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            goNextPage(item) {
                let { TID, OtherCourseID } = this.$route.query
                this.$router.push({
                    path: '/pages/project/discussReply',
                    query: {
                        TID,
                        OtherCourseID,
                        DiscussID: item.ParentComment.ID,
                        parentCreator:item.ParentComment.Creator,
                        parentPicUrl:item.ParentComment.PicUrl,
                        parentSummary:item.ParentComment.Summary
                    }
                })
            },
            async getData() {
                let { OtherCourseID } = this.$route.query
                try {
                    let res = await CourseDiscussList({
                        UserID: this.UserID,
                        PageIndex: this.PageIndex,
                        PageSize: this.PageSize,
                        OtherCourseID,
                    });
                    let _list = res && res.length ? res : []
                    // noData
                    if (!_list.length) {
                        if(this.PageIndex===0){
                            this.showNoData = true
                        }else{
                            this.noMoreText = true
                            this.moreText = false
                        }
                    }else{
                        this.noMoreText = _list.length < 10 ?true:false
                        this.moreText = !this.noMoreText
                        this.PageIndex = this.PageIndex + 1;
                        this.dataList = [...this.dataList, ..._list]
                    }
                } catch (error) {
                    console.log(error)
                }
            }
        },
        // 上拉加载
        onReachBottom() {
            if(!this.moreText){ return false}
            this.getData();
        },
        onPullDownRefresh() {
            this.PageIndex = 0;
            this.dataList = []
            this.moreText = false
            this.noMoreText = false
            this.getData();
            wx.stopPullDownRefresh()
            this.$toast('刷新成功')
        },
        onShow() {
            // 从上一页获取保存的内容
            this.Summary = this.$route.query.SavedSummary
            this.discussId = this.$route.query.DiscussID
            //数据初始化
            this.dataList = [];
            this.PageIndex = 0;
            this.moreText = false
            this.noMoreText = false
            let userInfo = wx.getStorageSync('userInfo')
            this.RoleCode = userInfo.RoleCode
            this.UserID = userInfo.UserID
            this.getData();
        },
        onUnload() {
            this.Summary = ''
            this.showNoData = false
        },
    }
</script>

<style scoped lang="less">
    page {
        height: 100%;
        width: 100%;
        background: #ffffff;
    }

    .discuss-wrap {
        position: relative;

        .no-data-wrap {
            position:absolute;
            left:50%;
            transform: translate(-50%,-50%);
        }

        .discuss-list-wrap {
            position: relative;
            padding-bottom: 320rpx;

            .discuss-item {
                position: relative;
                padding: 40rpx 30rpx 25rpx 30rpx;
                border-bottom: 1rpx solid #dddddd;

                .item-top {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .item-top-img {
                        height: 50rpx;
                        width: 50rpx;
                        border-radius: 100%;
                        background: green;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 100%;
                        }
                    }

                    .item-top-right {
                        flex: 1;
                        display: flex;
                        align-items: baseline;
                        padding-left: 25rpx;

                        h3 {
                            font-size: 32rpx;
                            margin-right: 40rpx;
                        }

                        span {
                            font-size: 16rpx;
                            color: #b9b9b9;
                        }
                    }
                }

                .item-center {
                    padding-left: 75rpx;
                    font-size: 20rpx;
                    word-break: break-all;
                }

                .item-bottom {
                    text-align: right;

                    .replyNum {
                        font-size: 26rpx;
                        color: #4aa585;
                        margin-right: 20rpx;
                    }

                    .giveLike {
                        font-size: 26rpx;
                        color: #ff6600;
                        margin-right: 20rpx;
                    }
                    .color-gray {
                        font-size: 26rpx;
                        color: #000000;
                    }
                }
            }
        }

        .discuss-footer-fixed {
            position: fixed;
            height: 320rpx;
            width: 100%;
            right: 0;
            bottom: 0;
            left: 0;
            background: #f2f2f2;

            .footer-textarea-wrap {
                position: relative;
                height: 240rpx;
                padding: 30rpx 28rpx;
                box-sizing: border-box;

                .footer-textarea {
                    background: white;
                    width: 100%;
                    height: 100%;
                    border: 1rpx solid #dddddd;
                    padding: 10rpx;
                    font-size: 25rpx;
                    box-sizing: border-box;
                }
            }

            .footer {
                height: 80rpx;
                line-height: 80rpx;
                width: 100%;
                text-align: center;
                color: #fff;
                font-size: 32rpx;
                display: flex;

                .button {
                    flex: 0.5;
                    border: 4rpx solid #FFF;
                    background: #4c9c83;
                }
            }

            /*.footer-button {*/
            /*height: 80rpx;*/
            /*width: 100%;*/
            /*background: #4aa585;*/
            /*line-height: 80rpx;*/
            /*text-align: center;*/
            /*color: #fff;*/
            /*font-size: 32rpx;*/
            /*}*/
        }
    }
</style>
